<template>
    <div>
        <div>
            <el-button type="primary" @click="addProduct">添加产品</el-button>
        </div>
<!--        数据列表-->
        <el-table :data="QueryTheGoodsData">
            <el-table-column :show-overflow-tooltip="true" prop="id" label="商品ID"/>
            <el-table-column :show-overflow-tooltip="true" prop="title" label="商品标题"/>
            <el-table-column :show-overflow-tooltip="true" prop="image" label="商品图片"/>
            <el-table-column :show-overflow-tooltip="true" prop="sellPoint" label="商品卖点"/>
            <el-table-column :show-overflow-tooltip="true" prop="price" label="商品价格"/>
            <el-table-column :show-overflow-tooltip="true" prop="cid" label="商品类目"/>
            <el-table-column :show-overflow-tooltip="true" prop="num" label="商品库存"/>
            <el-table-column :show-overflow-tooltip="true" prop="status" label="状态"/>
            <el-table-column :show-overflow-tooltip="true" prop="created" label="创建日期"/>
            <el-table-column :show-overflow-tooltip="true" prop="updated" label="更新日期"/>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                            circle
                    />

                    <el-button
                            size="mini"
                            icon="el-icon-delete"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            circle
                    />
                </template>
            </el-table-column>
        </el-table>
<!--        分页-->
        <ProductSelectPagin @getPagingData="getPagingData"/>
<!--        点击显示对话框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="80%"
        >
            <el-form ref="form" :model="ProductSelectForm" label-width="80px">
                <el-form-item label="商品类目">
                    <el-button style="float:left" type="primary" @click="productCategoryHandle">选择类目</el-button>
                    <span style="float: left; margin-left: 15px;"
                    v-if="currentCategory"
                    >{{currentCategory.name}}</span>
                </el-form-item>
                <el-form-item label="商品标题">
                    <el-input v-model="ProductSelectForm.title"/>
                </el-form-item>
                <el-form-item label="商品卖点">
                    <el-input v-model="ProductSelectForm.sellPoint"/>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="ProductSelectForm.price"/>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="ProductSelectForm.num"/>
                </el-form-item>

                <el-form-item label="商品图片">

                    <el-button @click="ImgUpload" style="float:left" type="primary">上传图片</el-button>
                    <span>{{imgData.name}}</span>
                </el-form-item>
                <el-dialog
                        width="40%"
                        title="上传图片"
                        :visible.sync="dialogImgVisible"
                        append-to-body
                >
                    <productUpload v-on:ImgVisible="ImgVisibleData"/>

                    <el-button type="primary" @click="dialogImgVisible = false">确定</el-button>
                </el-dialog>


                <el-form-item label="商品描述">
                    <ProductUEditor v-on:onProductDesc="getProductDesc"/>
                </el-form-item>


            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleSubmit">提 交</el-button>
              </span>

        </el-dialog>

<!--        商品类目对话框-->
        <el-dialog
                width="60%"
                title="商品类目"
                :visible.sync="dialogProductCategoryVisible"
                append-to-body
        >
            <el-tree
                    :load="loadTreeNodes"
                    :props="defaultProps"
                    lazy
                    highlight-current
                    @node-click="handleNodeClick"
            />
            <span>
                    <el-button type="primary" @click="dialogProductCategoryVisible = false">确定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import ProductSelectPagin from "./ProductSelectPagin";
    import ProductUEditor from "../../components/ProductUEditor";
    import productUpload from "./productUpload";
    export default {
        name: "ProductSelectList",
        data(){
            return{
                QueryTheGoodsData:[],
                dialogVisible:false,
                ProductSelectForm:{}, //定义对话框的内容
                dialogProductCategoryVisible:false,
                defaultProps:{
                    children: "children",
                    label: "name"
                },
                dialogImgVisible:false,
                imgData:{},
                currentCategory:{},
                description:'',
                flagId:0
            }
        },
        components:{
            ProductSelectPagin,
            ProductUEditor,
            productUpload
        },
        mounted(){
           this.getCommodity();
        },
        methods:{
            // 获取商品列表
            getCommodity(){
                this.$api.getSelectTbItemAllByPage({
                    page:1
                }).then(res=>{
                    // console.log(123456);
                    // console.log(res.data);
                    if (res.data.status === 200){
                        this.QueryTheGoodsData = res.data.data.result;
                    }else {
                        alert('数据获取失败');
                    }

                }).catch(error=>{
                    console.log('数据获取失败');
                    alert('数据获取失败');
                    // console.log(error);
                })
            },
            // 分页数据回传
          getPagingData(data){
              this.QueryTheGoodsData = data;
              // console.log(data)
          },

            // 关闭对话框事件
            addProduct(){
                this.dialogVisible = true;
            },

            // 选择类目
            productCategoryHandle(){
                this.dialogProductCategoryVisible = true;
                // this.$api.getXuanzeLeimu().then(res=>{
                //     console.log(res.data);
                // })
            },

            // 商品描述信息
            getProductDesc(value){
                this.description = value;

                // console.log('商品描述信息',value);
            },
            // 懒加载事件
            loadTreeNodes(node, resolve){
                this.currentCategory = node.data;
                if (node.level === 0) {
                    console.log('123');
                    this.$api.getXuanzeLeimu().then(res=>{
                        console.log(res.data);
                        if (res.status === 200){
                            return resolve(res.data.data);
                        }else {
                            alert('请求失败');
                        }
                    });
                }

                if (node.level >= 1){
                    console.log(1111);
                    this.$api.getXuanzeLeimu({
                        id:node.data.cid
                    }).then(res=>{
                        console.log(res.data);
                        if (res.status === 200){
                            return resolve(res.data.data);
                        }else {
                            alert('请求失败');
                        }
                    }).catch(error=>{
                        resolve([]);
                    })
                }
            },
            handleNodeClick(data){
            },
            // 上传图片事件
            ImgUpload(){
                // console.log(123);
              this.dialogImgVisible = true
            },
            ImgVisibleData(data){
              this.imgData = data;
                // console.log(1234,data.name);
            },
            // 提交事件
            dialogVisibleSubmit(){
                if (this.flagId){
                    this.$api.getUpdateTbItem({
                        id:this.flagId,
                        title:this.ProductSelectForm.title,
                        sellPoint:this.ProductSelectForm.sellPoint,
                        price:this.ProductSelectForm.price,
                        num:this.ProductSelectForm.num,
                        cid:this.currentCategory.cid,
                        desc:this.description,
                        image:this.imgData.url
                    }).then(res=>{
                        if (res.data.status === 200){
                            this.getCommodity();
                        }else {
                            alert('修改失败')
                        }
                    })

                }else {
                    this.$api.getInsertTbItem({
                        title:this.ProductSelectForm.title,
                        sellPoint:this.ProductSelectForm.sellPoint,
                        price:this.ProductSelectForm.price,
                        num:this.ProductSelectForm.num,
                        cid:this.currentCategory.cid,
                        desc:this.description,
                        image:this.imgData.url
                    }).then(res=>{
                        // console.log(res.data);
                        if (res.data.status === 200){
                            this.getCommodity();
                        }else {
                            alert('提交失败')
                        }
                    });
                }

                this.dialogVisible = false
            },
            // 删除产品
            handleDelete(index,row){
                // console.log(index,row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.getdeleteItemById({
                        itemId:row.id
                    }).then(res=>{
                        // console.log(res.data);
                        if (res.data.status === 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getCommodity();

                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                            // alert('')
                        }
                    }).catch(error=>{
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            // 预更新
            handleEdit(index,row){
                this.flagId = row.id;
                this.dialogVisible = true;
                this.$api.getPreUpdateItem({
                    itemId:row.id
                }).then(res=>{
                    if (res.data.status === 200){
                        console.log(res.data);
                        this.ProductSelectForm = {
                            title:res.data.data.title,
                            sellPoint:res.data.data.sellPoint,
                            price:res.data.data.price,
                            num:res.data.data.num,
                            cid:res.data.data.cid,
                            desc:res.data.data.desc,
                            image:res.data.data.image
                        }
                    }else {
                        alert('预更新失败')
                    }

                })
            }
        }
    }
</script>

<style scoped>

</style>